class Header {
    constructor() {
        this.init()
    }
    init() {
        this.regSelection = $$(".region-selection")
        this.regOption = $$(".region-options")
        this.seaInner = $$(".search-inner")
        this.sSearch = $$(".s-search")
        this.navMenu = $$(".nav-menu")
        this.zhTxr = $$(".txr")
        this.classfiyList = $$(".nav-item")
        this.register = $$(".register")
        this.signIn = $$(".sign-in")
        // for (var i = 1, item; item = this.classfiyList[i++];) {
        //     on(item, "mouseenter", this.showList.bind(this))
        // }
        // this.showList();
        this.loaddata().done($.proxy(function (res) {
            this.render(res)
        }, this))
        on(this.register, "click", this.goRegister.bind(this), "a")
        on(this.signIn, "click", this.goRegister.bind(this), "a")
        on(this.regSelection, "click", this.changeLanguage.bind(this));
        on(this.regSelection, "mouseout", this.disLanguage.bind(this));
        // on(this.regOption,"mouseover",this.xsLanguage.bind(this));
        // on(this.regOption,"mouseout",this.disLanguage.bind(this));
        on(this.regSelection, "click", this.changeLanguage.bind(this));
        on(document, "click", this.searchLow.bind(this));
        on(document, "click", this.searchLength.bind(this), ".s-search");
    }

    goRegister(evt) {
        var e = evt || event;
        var target = e.target || e.srcElement;
        if (target.parentNode.className == "register") {
            target.href = "../html/register.html"
        }
        if (target.parentNode.className == "sign-in") {
            target.href = "../html/signIn.html"
        }
    }

    changeLanguage() {
        this.regOption.style.display = "block"
    }
    disLanguage() {
        this.regOption.style.display = "none"
    }
    searchLow() {
        this.sSearch.className = "s-search";
        // var timer = null;
        for (var i = 0; i < this.zhTxr.length; i++) {
            this.zhTxr[i].className = this.zhTxr[i].className.replace("tx1", "txr")
        }
    }
    searchLength() {
        this.sSearch.className = "s-search active"
        for (var i = 0; i < this.zhTxr.length; i++) {
            this.zhTxr[i].className = this.zhTxr[i].className.replace("txr", "tx1");
        }
    }
    render(res) {
        var html = "";
        var data = res.data
        // this.navMenu.innerHTML+=html
        // var e = evt || event;
        // var target = e.target || e.srcElement;
        var template = `
        <%for(var i = 0,item;item=data[i++];){%>
            <li class="nav-item">
                        <a class="zh" href="../html/shopList.html?<%=item.cateId%>"><%=item.name%></a>
                        <div class="nav-unfold">
                            <ul class="unfold-list ncontainer clearfix">
                                <li>
                                    <h4 class="zh">分类</h4>
                                    <%for(var j=1;j<item.list.length;j++){%>
                                        <a href="#javascript" class="zh"><%=item.list[j].name%></a>
                                    <%}%>
                                </li>
                                <li>
                                    <h4 class="zh">品牌</h4>
                                    <%for(var m = 0;m<10;m++){%>
                                    <a href="#javascript" class="zh">爱马仕</a>
                                    <%}%>
                                </li>
                            </ul>
                        </div>
                    </li>
        <%}%>
        `
        html = ejs.render(template, {
            data
        })
        this.navMenu.innerHTML += html;
    }


    loaddata() {
        return $.ajax({
            url: "/daohang",
            data:{
                appKey:"100001",
                v:"1.0",
                method:"product.getCateoryList",
                deviceNumber:"1563239088468",
                channel:"1",
            },
            dataType:"json"
        })
    }
}
new Header();